<template>
  <div class="edit-remark flex items-center">
    <text-ell
      :content="emptyText(content)"
      class="mr-2 max-w-max flex-initial"
    />
    <el-icon class="edit-remark-icon" size="16" @click="visible = true">
      <edit />
    </el-icon>
    <basic-edit-remark-dialog
      v-model:visible="visible"
      :loading="loading"
      :content="content"
      @submit="onSubmit"
    />
  </div>
</template>

<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue'

interface IProps {
  content: string
  submit: (content: string) => Promise<void>
}

const props = defineProps<IProps>()

const visible = ref(false)
const loading = ref(false)

const onSubmit = async (content: string) => {
  loading.value = true
  try {
    await props.submit(content)
    visible.value = false
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.el-icon {
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>
